چجوری ارورهای CORS رو برطرف کنیم؟

چجوری ارورهای CORS رو توی React، Express و Node.js برطرف کنیم؟

از زبون کسی که چند بار سرِ کنسول داد زده!😅

تو یه فرانت‌اند React توپ ساختی. شیک، سریع، خوشگل.

بعد میای وصلش می‌کنی به بک‌اند جدید و تر تمیزت Node/Express، یه دکمه رو می‌زنی و یهو:

❌(...Access to fetch at ‘http://localhost:5000/api/data' from origin ‘http://localhost:3000' has been blocked by CORS policy)

خشکت می‌زنه.

ریفرش می‌کنی. داد می‌زنی. گوگل می‌کنی. یه تیکه کد از Stack Overflow کپی می‌کنی که احتمالاً مال ۲۰۱۲ئه.

هیچی جواب نمی‌ده 😶

آره... منم دراین شرایط بودم. تجربه‌ش کردم. هنوزم دارم باهاش روبرو میشم.

پس دیگه بی‌حرف اضافه می‌رم سر اصل مطلب و یه بار واسه همیشه این غول اعصاب‌ خُرد‌کن به اسم CORS رو درست می‌کنم.

 

صبر کن ، اصلاً CORS چی هست؟

CORS مخفف اشتراک منابع بین مبدأهای مختلفه. اسمش باکلاسه، ولی مشکلیه که واقعاً حرص آدمو درمیاره.😡

خیلی ساده بخوام بگم: مرورگر مثل یه والد خیلی سخت‌گیره.
اگه اپ React‌ت (مثلاً روی localhost:3000) بخواد با بک‌اندت (مثلاً روی localhost:5000) حرف بزنه، مرورگر داد می‌زنه:

«غریبه! نرو باهاش حرف بزن!»

و درخواستو بلاک می‌کنه، مگه اینکه بک‌اند خودش رسماً بگه:

«آره، می‌شناسمش. بذار بیاد تو.»

و اگه بک‌اند اون اجازه رو نده؟
خوش اومدی به شهر ارورها، جمعیت: فقط تو! 😅

🛑 مشکل از React نیست

بیاین یه لحظه روراست باشیم.

وقتی ارور CORS میاد، شاید وسوسه بشی بری تو کدای React و باهاشون ور بری. حتی ممکنه یه سری header بریزی توی fetch، انگار داری روش ادویه می‌پاشی!

ولی صبر کن...

مشکل تقریباً همیشه از بک‌اندِته.
React بی‌گناهه. فقط می‌خواد یه تماس ساده بگیره، همین.

تقصیر از Expressه. درستش کن!

راه‌حل ساده (بعداً ازم تشکر می‌کنی)😊

خب، حالا می‌رم سراغ راه‌حل واقعی که جواب می‌ده.

فایل سرور Express خودتو باز کن (معمولاً اسمش index.js، server.js یا یه اسم بی‌روح دیگه‌ست).

گام اول: نصب middleware CORS

npm install cors

گام دوم:سر وقت بیارش تو بازی ودرست هم راه بندازش.

const express = require('express');
const cors = require('cors');

const app = express();

// Use CORS middleware BEFORE your routes
app.use(cors({
  origin: 'http://localhost:3000', // or '*' if you're feeling wild
  credentials: true, // optional, needed if you’re sending cookies
}));

app.get('/api/data', (req, res) => {
  res.json({ message: 'No more CORS errors, baby!' });
});

app.listen(5000, () => {
  console.log('Server running on port 5000');
});

💥 تموم شد. دیگه کاری نداری.

مگر اینکه...

«صبر کن... هنوز کار نمی‌کنه؟»

خوش اومدی به جهنمِ Preflight 😵

گاهی مرورگر یه درخواست مخفی و ناجوانمردانه‌ی OPTIONS می‌فرسته، قبل از اینکه درخواست اصلی رو بفرسته.
در واقع داره از سرور می‌پرسه:
«هی، اشکال نداره من یه POST با کلی هدر عجیب‌غریب بفرستم؟»

اگه سرور این درخواستو نادیده بگیره، مرورگر می‌گه:
«نه بابا، لغو مأموریت!»

✅ راه‌حل:
مطمئن شو سرورت می‌تونه درخواست‌های OPTIONS رو دریافت و درست هندل کنه.

app.options('*', cors());

هنوزم درست کار نمی‌کنه؟ 😑

یه بار دیگه دقیق چک کن:

• نکنه res.header() رو یه جای اشتباهی گذاشتی.

• نکنه توی React یه سری هدر عجیب‌غریب فرستادی ولی به سرور نگفتی که منتظرشون باشه.

• نکنه cors() رو اشتباهی نوشتی cross() (نخند! خودم دیدم همچین چیزی رو 😅).

بخش React (برای اونایی که می‌خوان همه چی رو مو به مو بدونن)

خب باشه، حالا که اصرار داری، اینم از سمت React، فقط واسه اینکه همه چی کامل باشه:

fetch('http://localhost:5000/api/data', {
  method: 'GET',
  credentials: 'include', // only if you need cookies/session
  headers: {
    'Content-Type': 'application/json',
  },
})
  .then(res => res.json())
  .then(data => console.log(data));

زیادی سختش نکن.

اگه سرورت درست تنظیم شده باشه، خودش بدون دردسر کار می‌کنه.

❌ این کارو تو محیط واقعی (Production) نکن!

تو محیط توسعه (Development)، اینکه بزنی origin: '*' مشکلی نداره. یعنی می‌گی:
«هر کی خواست، بیاد.»

ولی تو محیط واقعی چی؟
این یعنی کلید خونه‌تو بدی دست همه‌ی اینترنت! 😬

✅ کاری که باید بکنی اینه که فقط دامنه‌هایی رو که واقعاً بهشون اعتماد داری به لیست سفید (whitelist) اضافه کنی:

const allowedOrigins = ['https://yourdomain.com', 'https://admin.yourdomain.com'];

app.use(cors({
  origin: function (origin, callback) {
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
}));

امنیت مهمه دوستان

نتیحه گیری ها (یا همان روان درمانی😅)

CORS واقعاً اعصاب‌خُردکنه. خیلی‌ها درکش نمی‌کنن. جونیور دِوها رو به گریه می‌ندازه و سینیر دِوها رو به آه و ناله!

ولی حقیقت اینه: وقتی که درست درک کنی، اصلاً اونقدرها هم ترسناک نیست.

مرورگر فقط داره کارش رو انجام می‌ده. سرور باید واضح حرف بزنه.

حالا می‌دونی چطور اینا رو با هم کنار بیاری.

نوبت توعه!

هنوز مشکل داری؟ کامنت بذار.

روش بهتری داری؟ بیاید بحث راه بندازیم.

CORS رو به خاطر این مقاله حل کردی؟ با دوستی که توی تب‌های گوگل غرق شده، به اشتراک بذار.

بیاید کم‌کم از داد و فریاد کردن توی کنسول کم کنیم. بریم به سمت هدف! 💪

🙏 ممنون که تا اینجا خوندی!

اگه این مطلب برات مفید بود، خوشحال می‌شم بهم خبر بدی یا با بقیه به اشتراک بذاری.
نظرت، تجربه‌ت یا حتی غر زدن‌هات درباره CORS رو حتماً بنویس ، اینجا کسی قضاوت نمی‌کنه 😄

یادت نره: ما همه یه روزی سر همین ارورها حرص خوردیم.
پس اگه الان داری به کسی کمک می‌کنی که کمتر حرص بخوره، کارت خیلی درسته! 💙